<!-- home -->
<template>
  <div class="container">

    <van-nav-bar
      title="确认工资表"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <div v-for="item in payrollList"  :key="item.payrollid">
      <van-cell title="所属月份：" v-model="item.ssyf" />
      <van-cell title="工号：" v-model="item.jobnum" />
      <van-cell title="姓名：" v-model="item.name" />
      <van-cell title="部门：" v-model="item.deptname" />
      <van-cell title="岗位职级：" v-model="item.post" />
      <van-cell title="标准(天)：" v-model="item.standard" />
      <van-cell title="请假(天)：" v-model="item.askedleave" />
      <van-cell title="旷工(天)：" v-model="item.absenteeism" />
      <van-cell title="出勤(天)：" v-model="item.attendance" />
      <van-cell title="基本工资：" v-model="item.basepay" />
      <van-cell title="未出勤扣款：" v-model="item.wcqkk" />
      <van-cell title="旷工扣款：" v-model="item.kgkk" />
      <van-cell title="考勤扣款：" v-model="item.kqkk" />
      <van-cell title="绩效职务：" v-model="item.jxpost" />
      <van-cell title="绩效津贴：" v-model="item.jxjt" />
      <van-cell title="绩效差补：" v-model="item.jxcb" />
      <van-cell title="提成金额：" v-model="item.tcje" />
      <van-cell title="绩效奖金：" v-model="item.jxjj" />
      <van-cell title="绩效扣款：" v-model="item.jxkk" />
      <van-cell title="工资总额：" v-model="item.gzze" />
      <van-cell title="社保代缴：" v-model="item.sbdj" />
      <van-cell title="个税代缴：" v-model="item.gsdj" />
      <van-cell title="实发工资金额：" v-model="item.sfgzje" />
      <van-cell title="本月亏损金额：" v-model="item.byksje" />
      <van-cell title="剩余亏损金额：" v-model="item.syksje" />
      <div  class="btn" >
        <van-button type="info" size="large" round @click="doSubmit(item)" v-if="item.qrflag != '1' ">确认</van-button>
      </div>
      <div class="seal-result seal-result-fail" v-if="item.qrflag == '1'">
        已确认
      </div>
    </div>
  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell, Checkbox, CellGroup, CheckboxGroup } from 'vant'

import { queryUserPayroll, confirmPayroll } from '../../api/api'

export default {
  name: 'Payroll',
  data() {
    return {
      payrollList: []
    }
  },

  created() {
    this.ywyname = this.$store.getters.userName
    this.queryUserPayroll()
  },
  mounted() {

  },

  methods: {
    queryUserPayroll() {
      const param = {}
      const userid = this.$store.getters.userId
      param.userid = userid
      queryUserPayroll(param).then(response => {
        if (response.code === 200) {
          const payrollList = response.rows
          this.payrollList = payrollList
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    doSubmit(item) {
      console.log(item.payrollid)
      const param = {}
      param.payrollid = item.payrollid
      confirmPayroll(param).then(response => {
        if (response.code === 200) {
          Toast.success(item.ssyf + '工资已确认')
          item.qrflag = '1'
          // this.queryUserPayroll()
        } else {
          Toast.fail(response.msg)
        }
      })
    }

  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: white;
  }

  .navclass{
    background-color:#f8f8f8;
  }

  .btn{
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 30px;
    background-color: white;
    padding-bottom: 150px;
  }

  .seal-content {
    width: 300px;
    min-height: 60px;
    vertical-align: bottom;
    word-wrap: break-word;
    position: relative;
  }

  .seal-result {
    width: 120px;
    height: 120px;
    transform: rotate(20deg);
    border: solid 2px green;
    border-radius: 100%;
    text-align: center;
    color: green;
    font-size: 30px;
    font-weight: bold;
    line-height: 120px;
    right: 5px;
    top: 25rem;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.8)
  }

  .seal-result-fail {
    border-color: red;
    color: red;
  }

</style>
